<script setup>
import { ref, onMounted } from "vue";
import { getVideoListFn } from "@/api/video";
import { showToast } from "vant";

const fetchVideoList = () => {
  getVideoListFn()
    .then((response) => {
      if (response.code === 200) {
        videoList.value = response.data.map((video) => ({ ...video, isPlaying: false }));
      } else {
        console.error("获取视频列表失败：", response.message);
      }
    })
    .catch((error) => {
      console.error("接口请求出错：", error);
    });
};
//  关注状态
const toggleFollow = (video) => {
  video.following = !video.following;
};
//  收藏状态
const toggleCollect = (video) => {
  video.collect = !video.collect;
};
//  点赞状态
const toggleThumbs = (video) => {
  video.thumbs = !video.thumbs;
};
//  播放状态
const toggleVideo = (video) => {
  video.isPlaying = true;
};

//  分享面板
const showShare = ref(false);
const options = [
  [
    { name: "微信", icon: "wechat" },
    { name: "朋友圈", icon: "wechat-moments" },
    { name: "微博", icon: "weibo" },
    { name: "QQ", icon: "qq" }
  ],
  [
    { name: "复制链接", icon: "link" },
    { name: "分享海报", icon: "poster" },
    { name: "二维码", icon: "qrcode" },
    { name: "小程序码", icon: "weapp-qrcode" }
  ]
];
const onSelect = (option) => {
  showToast(option.name);
  showShare.value = false;
};
onMounted(fetchVideoList);
</script>

<template>
  <div class="box">
    <ul>
      <li v-for="video in videoList" :key="video.id">
        <header>
          <div class="left">
            <van-image width="20" height="20" round :src="video.touxiang" />
            <span class="username">{{ video.username }}</span>
          </div>
          <div class="right">
            <span :style="{ color: video.following ? 'gray' : 'red' }" @click="toggleFollow(video)">
              {{ video.following ? "已关注" : "关注" }}
            </span>
            <span>...</span>
          </div>
        </header>

        <main>
          <div class="tit">{{ video.title }}</div>
          <div class="vid">
            <!-- 封面图 -->
            <div v-if="!video.isPlaying" class="cover" :style="{ backgroundImage: 'url(' + video.cover + ')' }" @click="toggleVideo(video)">
              <div class="video-btn">
                <van-icon size="0.5rem" name="play" />
              </div>
            </div>

            <!-- 视频播放界面 -->
            <div v-if="video.isPlaying" class="video-container">
              <video :src="video.video" controls autoplay style="width: 100%; height: 100%; border-radius: 10px"></video>
              <div @click="video.isPlaying = false" class="close-btn">x</div>
            </div>
          </div>
        </main>

        <footer>
          <span @click="showShare = true"><van-icon name="share-o" /> 分享</span>
          <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
          <span :style="{ color: video.collect ? 'red' : 'black' }" @click="toggleCollect(video)">
            <van-icon :name="video.collect ? 'star' : 'star-o'" :color="video.collect ? 'red' : 'black'" />
            {{ video.collect ? "已收藏" : "收藏" }}
          </span>
          <span><van-icon name="chat-o" /> {{ video.chat }}</span>
          <span :style="{ color: video.thumbs ? 'red' : 'black' }" @click="toggleThumbs(video)">
            <van-icon name="good-job" :color="video.thumbs ? 'red' : 'black'" />
            {{ video.thumbs ? "赞" : "赞" }}
          </span>
        </footer>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.box {
  height: 100vh;
  width: 100%;
  background-color: #f7f7f7;

  ul {
    display: flex;
    flex-direction: column;

    li {
      list-style: none;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      margin: 10px 5px 0 5px;
      border-radius: 10px;

      header {
        height: 30px;
        display: flex;
        font-size: 0.12rem;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.1rem;
        margin-top: 10px;

        img {
          display: inline-block;
        }

        .left {
          display: flex;
          align-items: center;

          span {
            margin-left: 0.1rem;
          }
        }

        .right {
          display: flex;
          align-items: center;

          :first-child {
            margin-right: 0.1rem;
          }

          :last-child {
            font-size: 0.2rem;
            margin-bottom: 0.1rem;
          }
        }
      }

      main {
        margin-top: 10px;
        width: 100%;

        .tit {
          font-size: 0.15rem;
          padding: 0 10px;
        }

        .vid {
          height: 2rem;
          margin: 0px 10px;
          margin-top: 10px;
          border-radius: 10px;
          position: relative;

          /* 封面图样式 */
          .cover {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            background-size: 100% 100%;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ccc;
          }

          .video-btn {
            position: absolute;
            width: 44px;
            height: 44px;
            left: calc(50% - 22px);
            top: calc(50% - 22px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
          }

          .video-container {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            background: transparent;
          }

          .close-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 0.2rem;
            color: #000;
            padding: 5px;
          }
        }
      }

      footer {
        margin: 0.1rem 0;
        width: 100%;
        height: 0.2rem;
        padding: 0 0.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 0.15rem;

          .van-share-sheet {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>
